import { ref, onMounted, computed, onBeforeMount } from 'vue';
import fitChartSize from '@/utils/echartsTool.ts';
import { getFactoryOverviewCockpitApi } from '/@/api/sms/sms';
const factoryCockpitData = ref({});
const getfactoryCockpitData = async () => {
	const res = await getFactoryOverviewCockpitApi();
	factoryCockpitData.value = res.data;
};
const fetchData = () => {
	//设备监控
	const leftOneOptions = computed(() => {
		//
		const colorList = ['#00FFFD', '#00FF7D', '#FFBB00'];
		const dataset = [
			{
				name: '在用设备',
				value: factoryCockpitData.value.n_EAMInUseCount,
				proportion: 56,
			},
			{
				name: '备用设备',
				value: factoryCockpitData.value.n_EAMUnUseCount,
				proportion: 42.4,
			},
			{
				name: '停用设备',
				value: factoryCockpitData.value.n_EAMUnUseCount,
				proportion: 1,
			},
		];
		const radius = ['40%', '45%', '50%'];
		const center = ['25%', '50%'];
		const unit = '套';
		const seriesData = dataset.map((item, index) => {
			return {
				value: item.value,
				name: item.name,
				itemStyle: {
					borderWidth: 4,
					borderColor: 'transparent',
				},
			};
		});

		const total =
			factoryCockpitData.value.n_EAMCount ||
			dataset.reduce((prev, cur) => {
				return prev + cur.value;
			}, 0);

		function _pie2() {
			let dataArr = [];
			for (var i = 0; i < 100; i++) {
				if (i % 2 === 0) {
					dataArr.push({
						name: (i + 1).toString(),
						value: 25,
						itemStyle: {
							normal: {
								color: '#01C2F7',
								borderWidth: 0,
								borderColor: 'rgba(0,0,0,0)',
							},
						},
					});
				} else {
					dataArr.push({
						name: (i + 1).toString(),
						value: 20,
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0)',
								borderWidth: 0,
								borderColor: 'rgba(0,0,0,0)',
							},
						},
					});
				}
			}
			return dataArr;
		}

		let option = {
			grid: {
				top: '10%',
				left: '10%',
				right: '6%',
				bottom: '14%',
			},
			color: colorList,
			legend: {
				show: true,
				orient: 'vertical',
				icon: 'rect',
				itemHeight: 15,
				itemWidth: 15,
				right: '4%',
				top: '18%',
				data: dataset,
				formatter: function (name: string) {
					let objItem = dataset.find((item) => item.name === name);
					if (objItem?.proportion) {
						return `{label| ${name} } {dataValue|${objItem.value}套}`;
					}
				},
				itemGap: 6,
				textStyle: {
					color: '#fff',
					rich: {
						label: {
							width: 100,
							ellipsis: '...',
							fontSize: 14,
							color: 'rgb(129, 163, 172)',
						},
						dataValue: {
							width: 20,
							textShadowBlur: 10,
							fontSize: 16,
							color: '#FFFFFF',
							verticalAlign: 'bottom',
							align: 'right',
						},
					},
				},
			},

			tooltip: {
				trigger: 'item',
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: radius?.[2]?.endsWith('%') ? [radius?.[2], Number(radius?.[2].slice(0, -1)) + 10 + '%'] : [radius?.[2], Number(radius?.[2]) + 14] || ['65%', '75%'],
					center: center || ['200', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					data: seriesData,
					tooltip: {
						formatter: function (params: { marker: any; name: any; value: string }) {
							return params.marker + params.name + ' : ' + params.value + unit;
						},
					},
				},
				{
					name: '虚线',
					type: 'pie',
					zlevel: 3,
					silent: true,
					radius: radius?.[1]?.endsWith('%') ? [radius?.[1], Number(radius?.[1]?.slice(0, -1)) + 1 + '%'] : [radius?.[1], Number(radius?.[1]) + 1] || ['51%', '52%'],
					center: center || ['200', '50%'],
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					data: _pie2(),
				},
				{
					//内圆
					name: '内圆',
					type: 'pie',
					radius: radius?.[0] || '38%',
					// center: ['50%', '50%'],
					center: center || ['200', '50%'],
					z: 1,
					itemStyle: {
						normal: {
							color: '#0A2D4F',

							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					label: {
						normal: {
							show: true,
							position: 'center', // 展示在中间位置
							formatter: () => {
								return `{a|${total}}\n{b| ${'设备总数'}}`;
							},
							rich: {
								a: {
									color: '#fff',
									fontSize: 16,
									fontWeight: 900,
								},
								b: {
									color: '#fff',
									fontSize: 14,
								},
							},
						},
					},
					hoverAnimation: false,
					tooltip: {
						show: false,
					},
					data: [100],
				},
			],
		};
		return option;
	});

	//近两周巡检
	const leftTwoOptions = computed(() => {
		let xAxis = [],
			data1 = [],
			data2 = [];
		//获取接口数据
		if (factoryCockpitData.value?.hdHiddenChartDataFinished) {
			for (let i = 0; i < 7; i++) {
				let ipTaskChartDataCompleted = factoryCockpitData.value.ipTaskChartDataCompleted;
				let ipTaskChartDataMiss = factoryCockpitData.value.ipTaskChartDataMiss;
				xAxis.push(ipTaskChartDataCompleted[i].d_DateTime);
				data1.push(ipTaskChartDataCompleted[i].n_Value);
				data2.push(ipTaskChartDataMiss[i].n_Value);
			}
		}

		let option = {
			legend: {
				icon: 'rect',
				itemHeight: 15,
				itemWidth: 15,
				textStyle: {
					fontSize: 12,
					color: '#fff',
				},
				data: [
					{
						icon: 'image://',
						name: '已完成',
					},
					{ name: '已漏检' },
				],
			},
			xAxis: {
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.2)',
					},
				},
				data: xAxis,
			},
			yAxis: {
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.1)',
					},
				},
				interval: 100,
			},
			series: [
				{
					name: '已完成',
					type: 'bar',
					stack: 'Ad',
					barCategoryGap: '2%',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(255, 255, 255, 0.04)',
					},
					barWidth: '30%',
					data: data1,
					itemStyle: {
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 0, //左
							y2: 1, //上
							colorStops: [
								{
									offset: 0,
									color: 'rgb(0, 255, 255)', // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(0, 255, 253, 0)', // 100% 处的颜色
								},
							],
						},
					},
				},
				{
					name: '已漏检',
					type: 'bar',
					barCategoryGap: '2%',
					barWidth: '20%',
					stack: 'Ad',
					data: data2,
					itemStyle: {
						color: '#FFB600',
					},
				},
			],
		};
		return option;
	});

	//近两周隐患
	const leftThreeOptions = computed(() => {
		let xAxis = [],
			data1 = [],
			data2 = [];

		//获取接口数据
		if (factoryCockpitData.value?.hdHiddenChartDataFinished) {
			for (let i = 0; i < 7; i++) {
				let hdHiddenChartDataFinished = factoryCockpitData.value.hdHiddenChartDataFinished;
				let hdHiddenChartDataUnFinished = factoryCockpitData.value.hdHiddenChartDataUnFinished;
				xAxis.push(hdHiddenChartDataFinished[i].d_DateTime);
				data1.push(hdHiddenChartDataFinished[i].n_Value);
				data2.push(hdHiddenChartDataUnFinished[i].n_Value);
			}
		}

		let option = {
			legend: {
				icon: 'rect',
				itemHeight: 15,
				itemWidth: 15,
				textStyle: {
					fontSize: 12,
					color: '#fff',
				},
				data: [
					{
						icon: 'image://',
						name: '已完成',
					},
					{ name: '已漏检' },
				],
			},
			xAxis: {
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.2)',
					},
				},
				data: xAxis,
			},
			yAxis: {
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.1)',
					},
				},
				interval: 100,
			},
			series: [
				{
					name: '已完成',
					type: 'bar',
					stack: 'Ad',
					barCategoryGap: '2%',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(255, 255, 255, 0.04)',
					},
					barWidth: '30%',
					data: data1,
					itemStyle: {
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 0, //左
							y2: 1, //上
							colorStops: [
								{
									offset: 0,
									color: 'rgb(0, 255, 255)', // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(0, 255, 253, 0)', // 100% 处的颜色
								},
							],
						},
					},
				},
				{
					name: '已漏检',
					type: 'bar',
					barCategoryGap: '2%',
					barWidth: '20%',
					stack: 'Ad',
					data: data2,
					itemStyle: {
						color: '#FFB600',
					},
				},
			],
		};
		return option;
	});

	//水电气用日周月年情况
	const rightOneOptions = computed(() => {
		//
		//获取接口数据
		let xAxis = ['6-22', '6-22', '6-22', '6-22', '6-22', '6-22', '6-22'];
		let waterData = [120, 200, 150, 80, 70, 110, 130];
		let powerData = [120, 200, 150, 80, 70, 110, 130];
		let gasData = [0.1, 0, 0.2, -0.1, -0.15, 0, -0.1];

		let option = {
			legend: {
				icon: 'rect',
				itemHeight: 15,
				itemWidth: 15,
				textStyle: {
					fontSize: 12,
					color: '#ffffff',
				},
				data: [
					{
						icon: 'image://',
						name: '水',
					},
					{
						name: '电',
						icon: 'image://',
					},
					{ name: '气' },
				],
			},
			//直角坐标系内绘图网格，设置表格显示区域
			grid: {
				x: 30, //图表左上角到左边界的距离
				y: 30, //图表左上角到上边界的距离
				x2: 35, //图表右下角到右边界的距离
				y2: 35, // 图表右下角到下边界的距离
			},
			xAxis: {
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.2)',
					},
				},
				data: xAxis,
			},
			yAxis: [
				{
					type: 'value',
					name: '',
					min: 0,
					max: 250,
					interval: 50,
					axisLabel: {
						formatter: '{value}',
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.1)',
						},
					},
				},
				{
					type: 'value',
					name: '',
					splitNumber: 2, // 设置 y 轴的分割段数，这里设置为 5 表示有 5 个刻度
					axisLabel: {
						formatter: function (value: number) {
							return (Math.abs(value) * 100).toFixed(0) + '%'; // 将刻度值转换为百分比并保留整数部分
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.1)',
						},
					},
				},
			],
			series: [
				{
					name: '水',
					yAxisIndex: 0, //选择index为1的Y轴作为参考系
					data: waterData,
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(255, 255, 255, 0.04)',
					},
					itemStyle: {
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 0, //左
							y2: 1, //上
							colorStops: [
								{
									offset: 0,
									color: 'rgb(0, 255, 255)', // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(0, 255, 253, 0)', // 100% 处的颜色
								},
							],
						},
					},
				},
				{
					name: '电',
					yAxisIndex: 0, //选择index为1的Y轴作为参考系
					data: powerData,
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(255, 255, 255, 0.04)',
					},
					itemStyle: {
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 0, //左
							y2: 1, //上
							colorStops: [
								{
									offset: 0,
									color: 'rgb(101, 211, 255)', // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(158, 227, 255, 0)', // 100% 处的颜色
								},
							],
						},
					},
				},
				{
					name: '气',
					yAxisIndex: 1, //选择index为1的Y轴作为参考系
					data: gasData,
					type: 'line',
					symbol: 'none',
					smooth: true,
					itemStyle: {
						color: '#FFB600',
					},
				},
			],
		};
		return option;
	});

	//企业今日在岗人数
	const rightTwoOptions = computed(() => {
		const colorList = ['#00FFFD', '#00FF7D', '#FFBB00'];
		const dataset = [
			{
				name: '办公区人数',
				value: factoryCockpitData.value.n_OnJobEmpOfficeCount,
				perc: factoryCockpitData.value.f_OnJobEmpOfficePercent,
				proportion: 56,
			},
			{
				name: '生产区人数',
				value: factoryCockpitData.value.n_OnJobEmpProductionCount,
				perc: factoryCockpitData.value.f_OnJobEmpProductionPercent,
				proportion: 42.4,
			},
		];
		const radius = ['40%', '45%', '50%'];
		const center = ['25%', '50%'];
		const unit = '套';
		const seriesData = dataset.map((item, index) => {
			return {
				value: item.value,
				name: item.name,
				itemStyle: {
					borderWidth: 4,
					borderColor: 'transparent',
				},
			};
		});

		const total =
			factoryCockpitData.value.n_OnJobEmpCount ||
			dataset.reduce((prev, cur) => {
				return prev + cur.value;
			}, 0);

		function _pie2() {
			let dataArr = [];
			for (var i = 0; i < 100; i++) {
				if (i % 2 === 0) {
					dataArr.push({
						name: (i + 1).toString(),
						value: 25,
						itemStyle: {
							normal: {
								color: '#01C2F7',
								borderWidth: 0,
								borderColor: 'rgba(0,0,0,0)',
							},
						},
					});
				} else {
					dataArr.push({
						name: (i + 1).toString(),
						value: 20,
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0)',
								borderWidth: 0,
								borderColor: 'rgba(0,0,0,0)',
							},
						},
					});
				}
			}
			return dataArr;
		}

		let option = {
			grid: {
				top: '10%',
				left: '10%',
				right: '6%',
				bottom: '14%',
			},
			color: colorList,
			legend: {
				show: true,
				icon: 'rect',
				itemHeight: 12,
				itemWidth: 12,
				orient: 'vertical',
				right: '4%',
				top: 'middle',
				data: dataset,
				formatter: function (name: string) {
					let objItem = dataset.find((item) => item.name === name);
					if (objItem?.proportion) {
						var arr = ['{label|' + name + '}', '{dataValue|' + objItem.value + '人' + '}', '{point|' + objItem.perc + '%}'];
						return arr.join('  ');
					}
				},
				itemGap: 6,
				textStyle: {
					color: '#fff',
					rich: {
						label: {
							width: 80,
							ellipsis: '...',
							fontSize: 14,
							color: 'rgb(129, 163, 172)',
						},
						dataValue: {
							width: 30,
							textShadowBlur: 10,
							fontSize: 14,
							verticalAlign: 'bottom',
							color: '#00FFFD',
						},
						point: {
							width: 20,
							fontSize: 14,
							color: '#FFFFFF',
							verticalAlign: 'bottom',
							textShadowBlur: 10,
							align: 'right', // 百分比右对齐
						},
					},
				},
			},

			tooltip: {
				trigger: 'item',
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: radius?.[2]?.endsWith('%') ? [radius?.[2], Number(radius?.[2].slice(0, -1)) + 10 + '%'] : [radius?.[2], Number(radius?.[2]) + 14] || ['65%', '75%'],
					center: center || ['200', '50%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					data: seriesData,
					tooltip: {
						formatter: function (params: { marker: any; name: any; value: string }) {
							return params.marker + params.name + ' : ' + params.value + unit;
						},
					},
				},
				{
					name: '虚线',
					type: 'pie',
					zlevel: 3,
					silent: true,
					radius: radius?.[1]?.endsWith('%') ? [radius?.[1], Number(radius?.[1]?.slice(0, -1)) + 1 + '%'] : [radius?.[1], Number(radius?.[1]) + 1] || ['51%', '52%'],
					center: center || ['200', '50%'],
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					data: _pie2(),
				},
				{
					//内圆
					name: '内圆',
					type: 'pie',
					radius: radius?.[0] || '38%',
					// center: ['50%', '50%'],
					center: center || ['200', '50%'],
					z: 1,
					itemStyle: {
						normal: {
							color: '#0A2D4F',

							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					label: {
						normal: {
							show: true,
							position: 'center', // 展示在中间位置
							formatter: () => {
								return `{a|${total}}\n{b| ${'总人数'}}`;
							},
							rich: {
								a: {
									color: '#fff',
									fontSize: 16,
									fontWeight: 900,
								},
								b: {
									color: '#fff',
									fontSize: 14,
								},
							},
						},
					},
					hoverAnimation: false,
					tooltip: {
						show: false,
					},
					data: [100],
				},
			],
		};
		return option;
	});

	onBeforeMount(() => {
		getfactoryCockpitData();
	});

	return {
		leftOneOptions,
		leftTwoOptions,
		leftThreeOptions,
		rightOneOptions,
		rightTwoOptions,
		factoryCockpitData,
	};
};

export default fetchData;
